<template>
	<view class="app">
			<map style="width: 100%; height: 1050rpx;" location>
			</map>
			<view class="content">
				<view class="search">
					<uni-search-bar :radius="100" placeholder="搜索社区" @confirm="search"></uni-search-bar>
				</view>
			</view>
			<!-- <button type="default" @click="open">底部弹出</button> -->
			<!-- <uni-popup ref=/"popup" type="bottom" > -->
			<view class="footer">
				<view class="location">
					<view class="site">
						海博广场B座
						<view class="address">
							陕西省西安市未央区未央路城运公园北门东100米路北
						</view>
					</view>

				</view>
				<view class="distance">
					<view class="distanceShort">
						距离您约
						<view class="kilometer">
							0.3 <text>千米</text>
						</view>
					</view>
					<view class="nearby">
						附近电梯
						<view class="kilometer">
							3 <text>部</text>
						</view>
					</view>
				</view>
			</view>
			<!-- </uni-popup> -->
	</view>
	
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {uniSearchBar,uniPopup,uniPopupMessage,uniPopupDialog},
		data() {
			return {
				 
			}
			
		},
		methods: {
			open(){
				this.$refs.popup.open()
			}
		}
	}
</script>

<style scoped>
	.app{
		position: relative;
	}
	.content{
		position: absolute;
	}
	.search{
		/* margin-top: 92rpx; */
		position: fixed;
		top: 92rpx;
		right: 0;
		left: 0;
		
	}
	.uni-searchbar{
	    background:  transparent !important;
	}
	/*底部大小 */
	.footer{
		width: 750rpx;
		height: 284rpx;
		background: #FFFFFF;
		border: none;
	}
	
	/* 底部内容 */
	.location{
		width: 670rpx;
		height: 132rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin: 0 auto;
		border-bottom: 1px solid #E2E6EF;
	}
	.site{
		
		font-size: 30rpx;
		font-weight: 500;
		color: #34363D;
		line-height: 44rpx;
	}
	.address{
		
		font-size: 24rpx;
		font-weight: 500;
		color: #989BA6;
		line-height: 44rpx;
	}
	
	.distance{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 30rpx;
	}
	.distanceShort,.nearby{
		font-size: 24rpx;
		font-weight: 500;
		color: #34363D;
		line-height: 44rpx;
		text-align: center;
		
	}
	.kilometer{	
		font-size: 44rpx;
		font-family: Arial;
		font-weight: bold;
		color: #34363D;
		line-height: 44rpx;
		display: flex;
		justify-content: center;
		
	}
	.kilometer text{	
		font-size: 24rpx;
		font-weight: 500;
		color: #989BA6;
		text-align: center;
		align-items: center;
		margin-left: 10rpx;
	}
</style>
